<template>
  <div id="neo4jGraph">

  </div>
</template>

<script>
/* eslint-disable */
import {Neo4jD3} from '@/lib/scripts/neo4jd3'
import {dynamicQuery} from "@/api/neo4jApi";

export default {
  name: 'HelloWorld',


  data() {
    return {
      pageCache:{}
    }
  },

  methods: {
    init: function () {

      var neo4jd3 = new Neo4jD3('#neo4jGraph', {
        // neo4jDataUrl: './test.json',
        //每个圆的半径
        nodeRadius: 50,
        neo4jData: {nodes: [], relationships: []},
        onNodeDoubleClick: function(node){loadData(node)},
        infoPanel: false
      });

      let _this = this;

      let loadData = function(node) {
        dynamicQuery({
          source: node.graph,
          target: "*",
          fitter: [
            {
              name: "id(" + node.graph + ")",
              operate: "eq",
              value: node.id
            }
          ],
          pageNo: _this.pageCache[node.graph + node.id] ? _this.pageCache[node.graph + node.id] : 1,
          pageSize: 10
        }).then(function (result) {
          if (!_this.pageCache[node.graph + node.id]) {
            _this.pageCache[node.graph + node.id] = 2;
          } else {
            _this.pageCache[node.graph + node.id] = _this.pageCache[node.graph + node.id] + 1;
          }
          neo4jd3.updateWithNeo4jData(result);
        });
      };

      dynamicQuery({
        source: "singerGraph",
        target: "*",
        fitter: [
          {
            name: "singerGraph.singerId",
            operate: "eq",
            value: 7633
          }
        ],
        pageNo:  1,
        pageSize: 10
      }).then(function (result) {
        neo4jd3.updateWithNeo4jData(result);
      });
    },
  },

  mounted: function () {
    window.onresize = function () {
      document.getElementById("neo4jGraph").style.height = document.documentElement.clientHeight + 'px';
      document.getElementById("neo4jGraph").style.width = document.documentElement.clientWidth + 'px';
      document.getElementById("neo4jGraph").style.overflow = 'hidden';
    };
    window.onresize();
    this.init();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
